<template>
	<div class="body-layouts flex flex-column">
		<div class="grid gap-20 mb-20">
			<div class="statistic-item p-4 flex flex-center grid-3">
				<img src="/app/ycMassage/image/statistic4.png" style="width:64px;height: 64px;" />
				<div class="flex-1 text-center">用户</div>
				<div>
					{{ statistic.userNum }}
				</div>
			</div>
			<div class="statistic-item p-4 flex flex-center grid-3">
				<img src="/app/ycMassage/image/statistic2.png" style="width:64px;height: 64px;" />
				<div class="flex-1 text-center">订单</div>
				<div>
					{{ statistic.orderNum }}
				</div>
			</div>
			<div class="statistic-item p-4 flex flex-center grid-3">
				<img src="/app/ycMassage/image/statistic2.png" style="width:64px;height: 64px;" />
				<div class="flex-1 text-center">服务订单</div>
				<div>
					{{ statistic.serviceOrderNum }}
				</div>
			</div>
			<div class="statistic-item p-4 flex flex-center grid-4">
				<img src="/app/ycMassage/image/statistic3.png" style="width:64px;height: 64px;" />
				<div class="flex-1 text-center">订单(金额)</div>
				<div>
					￥ {{ statistic.orderPrice }}
				</div>
			</div>
			<div class="statistic-item p-4 flex flex-center grid-5 pointer" @click="goToAlarm">
				<img src="/app/ycMassage/image/statistic3.png" style="width:64px;height: 64px;" />
				<div class="flex-1 text-center">待处理一键报警</div>
				<div>
					{{ statistic.alarm }}
				</div>
			</div>
			<div class="statistic-item p-4 grid-6" style="overflow: hidden;">
				<div class="flex flex-center mb-2">
					<div class="vip-name flex-1">H5链接</div>
					<el-button type="primary" @click="copyHomeUrl">一键复制</el-button>
				</div>
				<el-alert :title="getHomeUrl()" type="info" :closable="false" />
			</div>
		</div>
		<div class="grid gap-20 flex-1">
			<div class="bg-white p-4 rounded-4 grid-18">
				<div ref="echarts" style="width: 100%;height:600px;"></div>
			</div>
			<div class="bg-white rounded-4 flex flex-column grid-6">
				<div class="h6 p-4">开发团队</div>
				<div class="p-2 grid">
					<template v-for="item in team">
						<div class="p-2 grid-8">
							<div>{{ item.title }}</div>
						</div>
						<div class="p-2 grid-16"
							v-if="['object', 'array'].includes((typeof item.values).toLocaleLowerCase())">
							<a :href="val.url + '#'" target="_blank" v-for="val in item.values">{{ val.name }}</a>
						</div>
						<div class="p-2 grid-16" v-else>
							<div v-html="item.values"></div>
						</div>
					</template>
				</div>
				<div class="h6 p-4">产品动态</div>
				<div class="flex-1 overflow-y-auto" v-if="product.length > 0"
					style="max-height: 33vh;min-height: 20vh;">
					<div class="p-2 grid">
						<template v-for="item in product">
							<div class="p-2 grid-16">
								<div style="max-width: 100%" :tooltip="false">
									<a :href="item.url + '#'" target="_blank" :title="item.title">{{ item.title }}</a>
								</div>
							</div>
							<div class="p-2 grid-8">
								<div>{{ item.time }}</div>
							</div>
						</template>
					</div>
				</div>
				<el-empty description="暂无最新动态" class="flex-1 flex-center" v-else></el-empty>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				team: [],
				product: [],
				statistic: {
					templateTitleSum: 0,
					templateContentSum: 0,
					createTaskSum: 0,
					contentListTitleSum: 0,
					contentListContentSum: 0,
					releasedSum: 0,
					alarm: 0,
				},
				order: {
					turnover: '--',
					complete: 0,
					pay: 0,
					nopay: 0,
				}
			};
		},
		computed: {
			word_num() {
				let word_number = this.$userApp.userInfo.word_number;
				if (word_number >= 10000) {
					word_number = (word_number / 10000).toFixed(2) + '<small>万</small>';
				}
				return word_number;
			}
		},
		created() {
			this.$userApp.getUserInfo();
			this.initify();
			this.$nextTick(() => {
				const appid = this.$siteApp.siteInfo.appid;
				if (!this.$siteApp.siteInfo.domain) {
					this.$useConfirm('请先配置应用主域名', '警告', 'warning').then(() => {
						this.$router.push({
							path: '/PluginsDomains/settings',
							query: {
								appid: appid
							},
						});
					})
				}
				this.echarts = this.$echarts.init(this.$refs.echarts);
				let option = {
					color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
					title: {
						text: '本站数据(七日)'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					toolbox: {
						show: false
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
						}
					],
					yAxis: [
						{
							type: 'value'
						}
					]
				};

				// 使用刚指定的配置项和数据显示图表。
				this.echarts.setOption(option);
				let resizeEr;
				window.addEventListener('resize', () => {
					if (resizeEr) {
						clearTimeout(resizeEr);
					}
					resizeEr = setTimeout(() => {
						this.echarts.resize({ height: 600, silent: true });
					}, 300);
				})

			})
		},
		methods: {
			getHomeUrl() {
				if (!this.$siteApp.siteInfo.domain) {
					return "请先配置落地域名";
				}
				const appid = this.$siteApp.siteInfo.appid;
				return this.$siteApp.siteInfo.domain + '/app/ycMassage/#/?appid=' + appid;
			},
			copyHomeUrl() {
				try {
					const copyText = this.getHomeUrl();
					if (navigator.clipboard && window.isSecureContext) {
						navigator.clipboard.writeText(copyText).then(_ => {
							this.$useMessage('已复制', 'success');
						})
					} else {
						let input = document.createElement('input');
						input.value = copyText;
						document.body.appendChild(input);
						input.select();
						document.execCommand('Copy');
						input.remove();
						this.$useMessage('已复制', 'success');
					}
				} catch (error) {
					return this.$useMessage(error.message, 'error');
				}
			},
			initify() {
				this.$http.useGet("app/ycMassage/admin/Index/statistic").then(res => {
					this.team = res.data.team;
					this.product = res.data.product
					this.statistic = res.data.statistic;
					this.order = res.data.order;
					this.setEchartsOptions(res.data.echarts);
					console.log(res);
				});
			},
			setEchartsOptions(data) {
				data.series.map(item => {
					if (item.areaStyle && item.areaStyle.LinearGradient) {
						item.areaStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, item.areaStyle.LinearGradient);
					}
					return item;
				})

				// 使用刚指定的配置项和数据显示图表。
				this.echarts.setOption(data);
			},
			goToAlarm() {
				const appid = this.$siteApp.siteInfo.appid;
				this.$router.push({
					path: '/Alarm/index',
					query: {
						appid: appid
					},
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.body-layouts {
		height: 100%;
		overflow-y: auto;
	}

	.bg-white {
		background-color: #FFFFFF;
	}

	.statistic-item {
		border-radius: 10px;
		background: #FFFFFF;
		box-shadow: 10px 10px 20px #ccced0, -10px -10px 20px #ffffff;

		.div {
			width: 30%;
		}

		.div .div__label,
		.div .div-value {
			margin-top: 0;
			--n-label-text-color: #FFFFFF;
			--n-value-text-color: #343434;
			--n-value-suffix-text-color: #FFFFFF;
		}
	}


	.rounded-4 {
		border-radius: 10px;
	}

	.h6 {
		font-size: 1rem;
		font-weight: 600;
	}

	.div a+a {
		margin-left: 10px;
	}

	.flex {
		display: flex;

		&-column {
			flex-direction: column;
		}

		&-1 {
			flex: 1;
		}

		&-center {
			align-items: center;
			justify-content: center;
		}
	}

	.overflow-y-auto {
		overflow-y: auto;
	}

	::-webkit-scrollbar {
		width: 6px
	}

	::-webkit-scrollbar:horizontal {
		height: 6px
	}

	::-webkit-scrollbar-track {
		border-radius: 10px
	}

	::-webkit-scrollbar-thumb {
		background-color: #0003;
		border-radius: 10px;
		transition: all .2s ease-in-out
	}

	::-webkit-scrollbar-thumb:hover {
		cursor: pointer;
		background-color: #0000004d
	}

	.vip-name {
		font-weight: 600;
		font-size: 22px;
		color: #343434;
	}

	.vip-state {
		padding-right: 10px;
	}

	.vip-state span {
		color: #343434;
	}

	.vip-state.invalid span {
		color: #666666;
	}

	.num {
		font-size: 18px;
		font-weight: 600;
		color: #000010;
	}

	.p-4 {
		padding: 1rem;
	}

	.p-2 {
		padding: .5rem;
	}

	.mb-2 {
		margin-bottom: 0.5rem;
	}

	.mb-4 {
		margin-bottom: 1rem;
	}

	.mb-20 {
		margin-bottom: 20px;
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(24, 1fr);
	}

	.gap-20 {
		grid-gap: 20px;
	}

	.grid-3 {
		grid-column: span 3;
	}

	.grid-4 {
		grid-column: span 4;
	}

	.grid-5 {
		grid-column: span 5;
	}

	.grid-6 {
		grid-column: span 6;
	}

	.grid-8 {
		grid-column: span 8;
	}

	.grid-24 {
		grid-column: span 24;
	}

	.grid-16 {
		grid-column: span 16;
	}


	.grid-18 {
		grid-column: span 18;
	}
	.pointer{
		cursor: pointer;
	}
</style>